<!--
  @Description:接收人明细
  @Author:zqy
  @Date:2022-05-23 10:27:13
  @Last Modified by:zqy
  @Last Modified time:2022-05-23 10:27:13
-->
<template>
  <div class="ReceiverDetailPage">
    <Button type="primary" style="width:60px" @click="clickHandle">明细</Button>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      destroy-on-close
      width="80%"
      :close-on-click-modal="false"
      :title="`${type==='cc'?'抄送':'派单'}明细`"
      :append-to-body="true"
      @open="openHandle"
      @close="closeDialog"
    >
      <div class="contentBody">
        <table-box
          ref="refTable"
          table-size="small"
          :table-config="tableConfig"
          :other-filters="otherFilters"
          :table-height="400"
          :show-index="true"
          :show-selection="false"
          :show-custom-setting="false"
          :selected-arry.sync="tableSelected"
          :table-sortable="false"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils/'
export default {
  name: 'OrderReceiverDetail',
  components: {

  },
  props: {
    type: {
      type: String, // dispatch  派送， cc 抄送
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isLoading: false,
      visible: false,
      otherFilters: [], // 表格额外查询条件
      otherRaws: {},
      tableSelected: [], // 选择列
      tableConfig: {
        interfacePath: `/call-center/api/v2/workOrderOperationReceiver/page`,
        tabIndex: 10,
        hideFuncBar: true,
        // sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'operationMode',
            label: '组织性质',
            minWidth: 120,
            formatData: ({ operationMode }) => {
              const obj = {
                '01': '办事处',
                '02': '经销商',
                '03': '责任部门'
              }
              return obj[operationMode] || ''
            }
          },
          {
            prop: 'deptName',
            label: '接收方名称',
            minWidth: 150
          },
          {
            prop: 'receiverPhone',
            label: '联系电话',
            minWidth: 150
          },
          {
            prop: 'receiver',
            label: '人员',
            minWidth: 150,
            formatData: ({ receiver, receiverName }) => {
              if (receiver && receiverName) {
                return ` ${receiverName}(${receiver})`
              }
              return ` ${receiverName || ''}`
            }
          },
          {
            prop: 'operationTime',
            label: `${this.type === 'cc' ? '抄送' : '派送'}时间`,
            minWidth: 150,
            formatData: ({ operationTime }) => {
              return parseTime(operationTime)
            }
          },
          {
            prop: 'state',
            label: '接收状态',
            width: 100,
            formatData: ({ state }) => {
              return state === '02' ? '已接收' : '未接收'
            }
          }
        ]
      }
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    openHandle() {

    },
    clickHandle() {
      this.otherFilters = [
        { id: 'operationType', property: 'operationType', operator: '=', value: this.type === 'cc' ? '02' : '01' },
        { id: 'workOrderId', property: 'workOrderId', operator: '=', value: this.orderId }
      ]
      this.$nextTick(() => {
        this.visible = true
      })
    },
    closeDialog() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
